<template>
  <div>

    <!--  走马灯  -->
    <div class="block">
      <el-carousel trigger="click" height="400px">
        <el-carousel-item v-for="(goodsBigImgInfo, index) of goodsAllBigImgs" :key="index">
          <img :src="goodsBigImgInfo.goodsBigImgs" style="width: 100%; height: 400px; cursor: pointer"
               @click="gotoGoodsBuy(goodsBigImgInfo)">
        </el-carousel-item>
      </el-carousel>
    </div>

    <!--  全部商品  -->
    <el-row style="padding: 10px 20px">
      <el-col :span="24">
        <el-card>

          <div class="sreach">
            <div style="display: flex">
              <el-input
                  placeholder="请输入 '商品名称'"
                  v-model="input"
                  clearable
                  style="margin-right: 10px;width: 500px"
              >
              </el-input>
              <el-button style=" float: right" type="primary" @click="Search"> 搜索</el-button>
              <el-button type="success"  icon="el-icon-sort" @click="PurchaseQuantitySortGoods">
                点击量
              </el-button>
              <el-button type="success"  icon="el-icon-sort" @click="goodsPriceSortGoods">
                单价
              </el-button>
            </div>
          </div>

          <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
            <el-tab-pane label="全部" name="全部">
              <el-row style="margin-left:60px">
                <el-col :span="5" v-for="(goods, index) in fenyeshuju.slice(pageSize * ($store.state.currentPage - 1), pageSize * $store.state.currentPage)" :key="index"
                        style="margin: 10px 1.5vw; cursor: pointer">
                  <el-card style="height: 500px" @click="gotoGoodsBuy(goods)" shadow="hover">
                    <img :src="goods.goodsImg" class="image" @click="gotoGoodsBuy(goods)" alt="商品图片"
                         :title="goods.goodsInfo">
                    <div style="padding: 15px;" @click="gotoGoodsBuy(goods)">
                      <p style="color: black; font-weight: bolder">{{ goods.goodsname }}</p>
                      <div style="height: 60px">
                        <p style="color: #8c939d; font-size: 10px">
                          {{
                            goods.goodsInfo.length >= 80 ? goodsInfo = goods.goodsInfo.slice(0, 81) + '...' : goodsInfo = goods.goodsInfo
                          }}</p>
                      </div>
                      <p style="color: red; font-weight: bolder">单价 ： {{ goods.goodsprice }} ￥</p>
                      <p style="color: #8c939d; font-size: 10px">点击量 ： {{ goods.PurchaseQuantity }}</p>
                    </div>
                  </el-card>
                </el-col>
              </el-row>
            </el-tab-pane>

            <!-- 分类 -->
            <el-tab-pane v-for="(GoodsCategory, navIndex) in GoodsCategorys" :key="navIndex"
                         :label="GoodsCategory.goodstype"
                         :name="GoodsCategory.goodstype">
              <el-row style="margin-left:60px">
                <el-col :span="5" v-for="(goods1, index) in fenyeshuju.slice(pageSize * ($store.state.currentPage - 1), pageSize * $store.state.currentPage)" :key="index"
                        style="margin: 10px 1.5vw; cursor: pointer">
                  <el-card style="height: 500px" shadow="hover">
                    <img :src="goods1.goodsImg" class="image" alt="商品图片" @click="gotoGoodsBuy(goods1)"
                         :title="goods1.goodsInfo">
                    <div style="padding: 15px;" @click="gotoGoodsBuy(goods)">
                      <p style="color: black; font-weight: bolder">{{ goods1.goodsname }}</p>
                      <div style="height: 60px">
                        <p style="color: #8c939d; font-size: 10px">
                          {{
                            goods1.goodsInfo.length >= 80 ? goodsInfo = goods1.goodsInfo.slice(0, 81) + '...' : goodsInfo = goods1.goodsInfo
                          }}</p>
                      </div>
                      <p style="color: red; font-weight: bolder">单价 ： {{ goods1.goodsprice }} ￥</p>
                      <p style="color: #8c939d; font-size: 10px">点击量 ： {{ goods1.PurchaseQuantity }}</p>
                    </div>
                  </el-card>
                </el-col>
              </el-row>
            </el-tab-pane>
          </el-tabs>
        </el-card>

        <!--  分页处理  -->
        <el-card>
          <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="this.$store.state.currentPage"
              :page-sizes="[20, 40, 60, 100]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="fenyeshuju.length">
          </el-pagination>
        </el-card>
      </el-col>
    </el-row>


  </div>
</template>

<script>

import Request from "@/Network/axios";

export default {
  name: "IsGoods",

  data() {
    return {
      goodsAllBigImgs: [],
      goodsInfos: [],
      activeName: '全部',
      input: '',
      GoodsCategorys: [],
      fenyeshuju: [],
      pageSize: 20,
      flag : true
    }
  },

  methods: {

    //每页几条
    handleSizeChange(val) {
      this.pageSize = val
    },

    //当前页码
    handleCurrentChange(val) {
      this.$store.state.currentPage = val;
      this.fenyeshuju
    },

    // 按点击量排序商品
    PurchaseQuantitySortGoods() {
      this.flag = !this.flag
      this.fenyeshuju.sort((p1, p2) => {
        return this.flag === true ? p2.PurchaseQuantity - p1.PurchaseQuantity : p1.PurchaseQuantity - p2.PurchaseQuantity
      })
    },

    // 按商品价格排序
    goodsPriceSortGoods(){
      this.flag = !this.flag
      this.fenyeshuju.sort((p1, p2) => {
        return this.flag === true ? p2.goodsprice - p1.goodsprice : p1.goodsprice - p2.goodsprice
      })
    },

    // 去购物
    gotoGoodsBuy(goods) {
      // 进行路由跳转
      this.$router.push({
        name: 'buyGoods',
        query: {
          data: JSON.stringify(goods)
        }
      })

      // 进行该商品点击量的添加
      Request({
        url: '/user/addNumberHits',
        method: 'post',
        data: {
          id: goods.id
        }
      }).then(() => {
        goods.PurchaseQuantity++
      }).catch(err => {
        console.log(err)
      })

    },

    // 商品分类
    handleClick(tab) {
      if (tab.name === '全部') {
        return this.fenyeshuju = this.goodsInfos
      }

      const fenleiGoods = []

      this.goodsInfos.forEach(item => {
        if (item.goodstype === tab.name) {
          fenleiGoods.push(item)
        }
      })

      this.fenyeshuju = fenleiGoods
    },

    // 搜索商品
    Search() {
      if (this.input === '') {
        this.activeName = '全部'
        return this.fenyeshuju = this.goodsInfos
      }


      let sreachGoods = []
      sreachGoods = this.fenyeshuju.filter(item => {
        return item.goodsname.search(this.input) !== -1
      })
      this.fenyeshuju = sreachGoods
    }

  },

  mounted() {
    // 获取走马灯信息
    Request({
      url: '/user/getBigGoodsInfo',
      method: 'get'
    }).then(res => {
      this.goodsAllBigImgs = res.data.data
    }).catch(err => {
      console.log(err)
    })

    // 获取所有商品信息
    Request({
      url: '/user/getAllgoodsInfo',
      method: 'get'
    }).then(res => {
      this.goodsInfos = res.data.data
      this.fenyeshuju = this.goodsInfos
    }).catch(err => {
      console.log(err)
    })

    // 获取商品类别
    Request({
      url: '/user/getGoodsCategory',
      method: 'get'
    }).then(res => {
      this.GoodsCategorys = res.data.data
    }).catch(err => {
      console.log(err)
    })
  }


}
</script>

<style scoped>
.sreach {
  margin: 10px 0;
}

.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
}

.image {
  width: 100%;
  height: 300px;
  display: block;
}

p {
  margin: 5px 0;
}
</style>